﻿<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>DistSQL Plan Viewer</title>
    <style>
        @import url(style.css);
    </style>
</head>

<body>
<div id="textdiv">
Paste the diagram JSON in this box:
</div>
<textarea id="jsontext" cols="120" rows="10" font-family="inherit">
</textarea>
<br/>
<input type="button" id="button" onclick="init(getFormData())" value="Generate Graph"/>
<br/><br/>

<script src="d3.v3.js"></script>
<script src="cola.min.js"></script>

<script src="flow_diagram.js"></script>


<script>
  function getFormData() {
    var button = document.getElementById('button');
    button.value = "Start over";
    button.onclick = function(){ history.go(0); };

    // This will be imported from a json file.
    var jsontext = document.getElementById('jsontext');
    jsontext.readOnly = true
    document.getElementById('textdiv').style.display = "none"

    var data = JSON.parse(jsontext.value);
    return data
  }
</script>

<br/>
Scroll up/down to scale. Drag to pan or move nodes.
</body>
</html>
